﻿@import "base/mixin";
@import "base/mixin/normal";
@import "mobile/fx";
//==use mobile base
$default-platform : MB;

//==phone screen width
$phone-width : 320px !default;

//==default page color
$main-color    : #8F4F30 !default;
$aid-color     : #8F4F30 !default;
$dotting-colot : #8F4F30 !default;

@mixin add-to-home(){
    //Main container
    #addToHomeScreen {
        z-index:9999;
        -webkit-user-select:none;
        -webkit-box-sizing:border-box;
        width:208px;
        font-size:13px;
        padding:10px;
        text-align:left;
        font-family:helvetica;
        background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3));
        border:1px solid #505050;
        -webkit-border-radius:8px;
        -webkit-background-clip:padding-box;
        color:#333;
        text-shadow:0 1px 0 rgba(255,255,255,0.75);
        line-height:130%;
        -webkit-box-shadow:0 0 4px rgba(0,0,0,0.5);
        //The 'wide' class is added when the popup contains the touch icon
        &.wide {
            width:240px;
        }
        //The balloon arrow
        .arrow {
            position:absolute;
            background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc));
            border-width:0 1px 1px 0;
            border-style:solid;
            border-color:#505050;
            width:16px; height:16px;
            -webkit-transform:rotateZ(45deg);
            bottom:-9px; left:50%;
            margin-left:-8px;
            -webkit-box-shadow:inset -1px -1px 0 #a9a9a9;
            -webkit-border-bottom-right-radius:2px;
        }
        //The balloon arrow for iPad
        .ipad .arrow {
            -webkit-transform:rotateZ(-135deg);
            background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee));
            -webkit-box-shadow:inset -1px -1px 0 #fff;
            top:-9px; bottom:auto; left:50%;
        }
        //Close button
        .close {
            -webkit-box-sizing:border-box;
            position:absolute;
            right:2px;
            top:2px;
            width:14px;
            height:14px; line-height:10px;
            text-align:center;
            text-indent:1px;
            font-size:14px;
            -webkit-border-radius:7px;
            background:rgba(0,0,0,0.12);
            color:#707070;
            -webkit-box-shadow:0 1px 0 #fff;
            font-size:13px;
        }
        //The '+' icon, displayed only on iOS < 4.2
        .plus {
            font-weight:bold;
            font-size:1.3em;
        }
        //The 'share' icon, displayed only on iOS >= 4.2
        .share {
            display:inline-block;
            width:18px;
            height:15px;
            background-repeat:no-repeat;
            background-image:url();
            background-size:18px 15px;
            text-indent:-9999em;
            overflow:hidden;
        }
        //The touch icon (if available)
        .touchIcon {
            display:block;
            float:left;
            -webkit-border-radius:8px;
            -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5),
                inset 0 0 2px rgba(255,255,255,0.9);
            background-repeat:none;
            width:44px; height:44px;
            -webkit-background-size:44px 44px;
            margin:0 10px 5px 0;
            border:1px solid #333;
            -webkit-background-clip:padding-box;
        }
        //The 'share' icon for retina display
        @media all and (-webkit-min-device-pixel-ratio: 2) {
            #addToHomeScreen .share {
                background-image:url();
            }
        }
    }
}
